<template>
  <el-row :gutter="20">
    <el-col :xs="{offset:0,span:24}" :sm="{offset:0,span:12}" :md="{offset:0,span:8}" :lg="6">
      <el-card style="margin-bottom:20px;">
        <div slot="header" class="clearfix">
          <span>个人信息</span>
        </div>

        <div class="user-profile">
          <div class="box-center">
            <el-avatar size="large" :src="avatar"></el-avatar>
          </div>
          <div class="box-center">
            <div class="user-name text-center">Super {{ name }}</div>
            <div class="user-role text-center text-muted">{{ name }}</div>
          </div>
        </div>

        <div class="user-bio">
          <div class="user-education user-bio-section">
            <div class="user-bio-section-header">
              <i class="el-icon-document"></i>
              <span>Education</span></div>
            <div class="user-bio-section-body">
              <div class="text-muted">
                JS in Computer Science from the University of Technology
              </div>
            </div>
          </div>

          <div class="user-skills user-bio-section">
            <div class="user-bio-section-header">
              <i class="el-icon-document-checked"></i>
              <span>Skills</span></div>
            <div class="user-bio-section-body">
              <div class="progress-item">
                <span>Vue</span>
                <el-progress :percentage="70" />
              </div>
              <div class="progress-item">
                <span>JavaScript</span>
                <el-progress :percentage="18" />
              </div>
              <div class="progress-item">
                <span>Css</span>
                <el-progress :percentage="12" />
              </div>
              <div class="progress-item">
                <span>ESLint</span>
                <el-progress :percentage="100" status="success" />
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="{offset:0,span:24}" :sm="{offset:0,span:12}" :md="{offset:0,span:8}" :lg="6">
      <el-card style="margin-bottom:20px;">
        <div slot="header" class="clearfix">
          <span>修改密码</span>
        </div>
        <el-form label-width="80px">
          <el-form-item label="手机号码">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="旧密码">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" >提 交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
    <el-col :xs="{offset:0,span:24}" :sm="{offset:0,span:12}" :md="{offset:0,span:8}" :lg="6">
      <el-card style="margin-bottom:20px;">
        <div slot="header" class="clearfix">
          <span>个人信息</span>
        </div>

        <div class="user-profile">
          <div class="box-center">
            <el-avatar size="large" :src="avatar"></el-avatar>
          </div>
          <div class="box-center">
            <div class="user-name text-center">Super {{ name }}</div>
            <div class="user-role text-center text-muted">{{ name }}</div>
          </div>
        </div>

        <div class="user-bio">
          <div class="user-education user-bio-section">
            <div class="user-bio-section-header">
              <i class="el-icon-document"></i>
              <span>Education</span></div>
            <div class="user-bio-section-body">
              <div class="text-muted">
                JS in Computer Science from the University of Technology
              </div>
            </div>
          </div>

          <div class="user-skills user-bio-section">
            <div class="user-bio-section-header">
              <i class="el-icon-document-checked"></i>
              <span>Skills</span></div>
            <div class="user-bio-section-body">
              <div class="progress-item">
                <span>Vue</span>
                <el-progress :percentage="70" />
              </div>
              <div class="progress-item">
                <span>JavaScript</span>
                <el-progress :percentage="18" />
              </div>
              <div class="progress-item">
                <span>Css</span>
                <el-progress :percentage="12" />
              </div>
              <div class="progress-item">
                <span>ESLint</span>
                <el-progress :percentage="100" status="success" />
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="{offset:0,span:24}" :sm="{offset:0,span:12}" :md="{offset:0,span:8}" :lg="6">
      <el-card style="margin-bottom:20px;">
        <skeleton type='listcom' active :options="{
            row: 2,
            lineHight: 20
        }" />
        <skeleton type='listcom' active :options="{
            row: 3,
            lineHight: 20
        }" />

        <skeleton type='card' active :options="{
            height: '40px'
        }" />
      </el-card>
    </el-col>
    <el-col :xs="{offset:0,span:24}" :sm="{offset:0,span:12}" :md="{offset:0,span:8}" :lg="6">
      <el-card style="margin-bottom:20px;">
        <skeleton type='card' active :options="{
            height: '40px'
        }" />
        <skeleton  type='circlecom' active :options="{
            width: '100px'
        }" />
        <skeleton type='listcom' active :options="{
            row: 2,
            lineHight: 20
        }" />
        <skeleton type='listcom' active :options="{
            row: 3,
            lineHight: 20
        }" />
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed:{
    ...mapGetters([
      'avatar',
      'name'
    ])
  }
}
</script>

<style  scoped>
.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}
.user-name {
  font-weight: bold;
}
.box-center {
  padding-top: 10px;
}
.user-role {
  padding-top: 10px;
  font-weight: 400;
  font-size: 14px;
}
.el-table {
  border-top: 1px solid #dfe6ec;
}
.box-social {
  padding-top: 30px;

}
.user-follow {
  padding-top: 20px;
}
.user-bio   span {
  padding-left: 4px;
}
.user-bio {
  margin-top: 20px;
  color: #606266;



}

.user-bio-section {
  font-size: 14px;
  padding: 15px 0;


}
.user-bio-section-header {
  border-bottom: 1px solid #dfe6ec;
  padding-bottom: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}
</style>
